<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生信息管理系统 ｜ 登录注册</title>
    <link rel="stylesheet" href="css/form.css">
    <link rel="stylesheet" href="css/model.css">
</head>
<body>

<div class="container" id="loginContainer">
    <h2>用户登录</h2>
    <form id="loginForm">
        <input type="text" name="username" placeholder="用户名" required>
        <input type="password" name="password" placeholder="密码" required>
        <button type="submit">登录</button>
    </form>
    <div class="toggle-link">
        <p>还没有账号？ <a href="/register.html">注册</a></p>
    </div>
    <div id="messageModel" class="modal">
        <div class="modal-content">
            <span class="close" id="closeModal">&times;</span>
            <p id="modalMessage"></p>
        </div>
    </div>
</div>
<script src="js/common.js"></script>
<script>

    window.onload = () => {
        const loginForm = document.querySelector('#loginForm');

        loginForm.addEventListener('submit', evt => {
            evt.preventDefault();
            const formData = new FormData(loginForm);

            const loginInfo = {};

            formData.forEach((value, key) => {
                loginInfo[key] = value;
            });

            login(loginInfo);
            return false;
        });
    };
    const login = (loginInfo) => {
        fetch('dispatch.php?controller=StudentManage&service=login', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(loginInfo),

        })
            .then(response => response.json())
            .then(data => {
                if (data.code === 0) {
                    showModal(data.message)
                } else {
                    // 处理成功进入首页
                    window.location.href = '/';
                }
            })
    }
</script>

</body>
</html>
